import { Card, Col, Row, Statistic } from 'antd';
import { useRequest } from 'umi';
import type { FC } from 'react';
import { Gauge, WordCloud, Liquid, RingProgress } from '@ant-design/charts';
import type { WordCloudData } from '@antv/g2plot/esm/plots/word-cloud/layer';

import { GridContent } from '@ant-design/pro-layout';
import numeral from 'numeral';
import Map from './components/Map';
import ActiveChart from './components/ActiveChart';
import { queryTags } from './service';
import styles from './style.less';

const { Countdown } = Statistic;

const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK

const Monitor: FC = () => {
  const { loading, data } = useRequest(queryTags);

  const wordCloudData: WordCloudData[] = (data?.list || []).map((item) => {
    return {
      id: +Date.now(),
      word: item.name,
      weight: item.value,
    };
  });

  return (
    <GridContent>
      <>
        <Row gutter={24}>
          <Col xl={12} lg={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
            <Card title="各品类占比" bordered={false} className={styles.pieCard}>
              <Row style={{ padding: '16px 0' }}>
                <Col span={8}>
                  <div>社区访问量</div>
                  <RingProgress forceFit height={128} percent={0.28} />
                </Col>
                <Col span={8}>
                   <div>文章访问量</div>
                  <RingProgress color="#5DDECF" forceFit height={128} percent={0.22} />
                </Col>
                <Col span={8}>
                  <div>图书推荐访问量</div>
                  <RingProgress color="#2FC25B" forceFit height={128} percent={0.32} />
                </Col>
              </Row>
            </Card>
          </Col>
          <Col xl={12} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
            <Card
              title="文章资源"
              bodyStyle={{ textAlign: 'center', fontSize: 0 }}
              bordered={false}
            >
              <Liquid
                height={161}
                min={0}
                max={10000}
                value={1439}
                forceFit
                padding={[0, 0, 0, 0]}
                statistic={{
                  formatter: (value) => `${((100 * value) / 10000).toFixed(1)}%`,
                }}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col xl={24} lg={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
            <Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}>
              <ActiveChart />
            </Card>
          </Col>
        </Row>
        
      </>
    </GridContent>
  );
};

export default Monitor;
